// Dark codemirror theming

#editor .CodeMirror, .quicklook .body .CodeMirror {
    color:var(--grey-0);
}

.CodeMirror-focused .CodeMirror-selected { background-color:var(--selection-dark); }
.CodeMirror .CodeMirror-selected { background-color:var(--selection-dark); }

.CodeMirror-cursor { background: var(--c-primary-shade); }

// First the code blocks
.cm-comment, .cm-fenced-code, .cm-inline-math { color:var(--grey-1); }
.cm-fenced-code {
    &.cm-comment    { color: var(--grey-3); }
    &.cm-attribute  { color: var(--blue-3); }
    &.cm-builtin    { color: var(--blue-3); } // Some modes use this for keywords
    &.cm-string     { color: var(--green-0); }
    &.cm-string-2   { color: var(--gold-selection-dark); }
    &.cm-variable   { color: var(--grey-1); }
    &.cm-variable-2 { color: var(--blue-0); }
    &.cm-keyword    { color: var(--purple-selection); }
    &.cm-property   { color: var(--orange-1); }
    &.cm-atom       { color: var(--green-selection-dark); }
    &.cm-number     { color: var(--blue-3); }
}

// Make the block cursor visible in dark mode as well
.CodeMirror .CodeMirror-overwrite .CodeMirror-cursor,
.CodeMirror.cm-fat-cursor .CodeMirror-cursor {
  background-color: var(--c-primary-shade);
}

// HTML tags
.cm-tag       { color: var(--orange-2); }
.cm-attribute { color: var(--blue-3); }
.cm-bracket   { color: var(--grey-1); }
.cm-string    { color: var(--green-0); }

// Code background
.cm-comment:not(.cm-formatting):not(.cm-fenced-code) { background-color: var(--grey-4); }

// TYPOGRAPHY
.cm-formatting-header-1, .cm-formatting-header-2, .cm-formatting-header-3,
.cm-formatting-header-4, .cm-formatting-header-5, .cm-formatting-header-6,
.cm-url { color: var(--c-primary-shade); }

// Style the code block line wrapper classes
.code-block-line { background-color: #333; }

/* LISTS */
.cm-formatting-list-ul,
.cm-formatting-list-ol { color: var(--c-primary-shade); }

/* TYPOGRAPHY */
.cm-quote, .cm-link, .cm-strong, .cm-em { color:var(--c-primary-shade); }
.cm-spell-error { text-decoration-color: var(--bg-error); }
.cm-zkn-tag, .cm-zkn-id, .cm-zkn-link, .cm-zkn-link-formatting { color:var(--c-primary-shade); }
.cma { color: var(--c-primary-shade); }

// citations
.citeproc-citation {
  background-color: var(--grey-5);
  &.error { color: var(--bg-error); }
}

// Mermaid charts
.mermaid-chart {
  // THEMING
  // For now, a simple background
  // for easy recognition
  svg { background-color: var(--grey-4); }
}

.cm-formatting-escape { color:var(--grey-0); }

// YAML Frontmatter indicator -- dark version
.cm-yaml-frontmatter-start {
  color: inherit;

  &::after {
    color: rgb(80, 80, 80);
    background-color: rgb(40, 40, 40);
  }
}

.CodeMirror-foldmarker {
  background-color: var(--grey-5);
  color: var(--grey-2);

  &:hover { background-color: var(--grey-4); }
}

.CodeMirror-guttermarker-subtle { color: #464646; }

// Hint related stuff
.CodeMirror-hints {
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border: 1px solid var(--grey-5);

  background: var(--grey-7);
  li.CodeMirror-hint {
    color: var(--grey-0);

    &:hover { background-color: var(--grey-5); }
  }

  li.CodeMirror-hint-active {
    background-color: var(--c-primary-shade);
    color: var(--grey-0);

    &:hover { background-color: var(--c-primary); }
  }

  .cm-hint-colour {
    color: var(--grey-3);
    background-color: var(--grey-5);
  }
}
